<template>
  <view class="content">
    <view class="header">
      <image class="bg" src="https://ainengli.hzjrsw.com/jkhx/loginBg.png" />
      <text class="title">登录后开发者将获得以下权限</text>
      <text class="nickname">获得您的公开信息（昵称、头像等）</text>
    </view>
    <view class="btn" v-if="state.authoritystate == 1">
      <text class="login" @tap="login">一键登录</text>
      <!-- <text class="register" @tap="login">手机验证码登录/注册</text> -->
    </view>
    <view class="btn" v-if="state.authoritystate == 2">
      <text class="login" @tap="state.authoritystate = 3">允许授权</text>
      <text class="register">暂不授权</text>
    </view>
    <view class="btn" v-if="state.authoritystate == 3">
      <text class="login">手机号快捷登录</text>
    </view>
    <up-modal
      :show="state.showPopup"
      :title="state.title"
      :closeOnClickOverlay="true"
      :showConfirmButton="false"
      @close="close"
    >
      <view class="modal">
        <view class="title">用户隐私保护提示</view>
        <view class="modalContent">
          在你使用健康画像服务之前，请仔细阅读《健康画像小程序隐私保护指引》如你同意该指引，请点击“同意”开始使用本小程序。
        </view>
        <view class="agree" @tap="agree">同意</view>
        <view class="refuse" @tap="close">拒绝</view>
      </view>
    </up-modal>
  </view>
</template>
<script setup lang="ts">
import { reactive, nextTick } from 'vue'
import { miniLogin, getDefault } from '@/api/login/index'
import { onLoad, onShow } from '@dcloudio/uni-app'
import store from '@/store'

const state = reactive({
  imgShow: true,
  showPopup: false,
  title: '',
  authoritystate: 1,
  protocolState: ''
})
onShow(() => {
  if (uni.hideHomeButton) {
    uni.hideHomeButton()
  }
})
const readFun = () => {
  state.imgShow = !state.imgShow
}
const protocolFun = (name) => {
  state.showPopup = true
  state.protocolState = name
  //   uni.navigateTo({
  //     url: '/pages/login/guide'
  //   })
}
const agree = () => {
  state.imgShow = false
  state.showPopup = false
}
const close = () => {
  state.showPopup = false
}
const getLogin = () => {
  return new Promise((resolve, reject) => {
    uni.login({
      success: (res) => {
        if (res.code) {
          miniLogin(res.code).then((res) => {
            if (res.code === 0) {
              store.commit('SET_USERINFO', res.data)
              store.commit('setToken', res.data.token)
              uni.setStorageSync('token', res.data.token)
              resolve(res.data)
            } else {
              reject()
            }
          })
        } else {
          reject()
        }
      }
    })
  })
}
const login = async () => {
  // if (state.imgShow) {
  //   protocolFun('')
  //   return
  // }
  uni.showLoading({
    title: '登录中...',
    mask: true
  })

  store.dispatch('setUserInfo', {
    success: () => {
      uni.hideLoading()
    },
    fail: () => {
      uni.hideLoading()
      uni.showToast({
        title: '登录失败,请重试！',
        icon: 'error'
      })
    }
  })

  // let info = {}
  // if (uni.getStorageSync('token')) {
  //   info = store.state.userInfo
  // } else {
  //   info = await getLogin()
  // }
  // if (!info) {
  //   uni.hideLoading()
  //   uni.showToast({
  //     title: '登录失败,请重试！',
  //     icon: 'error'
  //   })
  //   return
  // }
  // let params = {
  //   userId: info.userId,
  //   empi: info.empi
  // }
  // if (info.phone && info.isVerified) {
  //   getDefault(params.userId).then((res) => {
  //     info.patientInfo = Object.assign({}, res.data)
  //     store.commit('SET_USERINFO', info)
  //     uni.switchTab({
  //       url: '/pages/index/index'
  //     })
  //   })
  // } else if (!info.phone) {
  //   uni.redirectTo({
  //     url: '/pages/login/login'
  //   })
  // } else if (!info.isVerified) {
  //   uni.redirectTo({
  //     url: '/pages/login/realName'
  //   })
  // }
  // uni.hideLoading()
}
</script>
<style lang="scss" scoped>
.content {
  height: 100vh;
  background: #fff;

  .header {
    position: relative;
    height: 520rpx;

    .bg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      width: 100%;
      height: 520rpx;
    }

    .title {
      position: relative;
      z-index: 2;
      display: inline-block;
      margin: 94rpx 48rpx 0;
      font-size: 44rpx;
      font-weight: 700;
      color: #222;
    }

    .nickname {
      position: relative;
      z-index: 2;
      display: block;
      margin: 16rpx 48rpx 0;
      font-size: 28rpx;
      color: #666;
    }
  }

  .btn {
    margin: 0 48rpx;

    .login {
      display: block;
      height: 96rpx;
      font-size: 32rpx;
      font-weight: bold;
      line-height: 96rpx;
      color: #fff;
      text-align: center;
      background: #00d1b6;
      border-radius: 48rpx;
    }

    .register {
      display: block;
      height: 96rpx;
      margin-top: 32rpx;
      font-size: 32rpx;
      line-height: 96rpx;
      color: #222;
      text-align: center;
      border: 1px solid #cfcfcf;
      border-radius: 48rpx;
    }
  }

  .protocol {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: calc(34rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(34rpx + env(safe-area-inset-bottom));
    font-size: 24rpx;
    color: #666;
    text-align: center;

    .img {
      display: inline-block;
      width: 40rpx;
      height: 40rpx;
      padding-right: 10rpx;
      vertical-align: middle;
    }

    .agree {
      display: inline-block;
      vertical-align: middle;
    }

    .protocolTitle,
    .privacy {
      display: inline-block;
      color: #00d1b6;
      vertical-align: middle;
    }
  }

  ::v-deep .u-popup {
    .modal {
      .title {
        font-size: 36rpx;
        font-weight: 700;
        color: #1d2129;
        text-align: center;
      }

      .modalContent {
        margin-top: 16rpx;
        font-size: 30rpx;
        color: #4e5969;
      }

      .agree {
        height: 88rpx;
        margin: 40rpx auto 10rpx;
        font-size: 30rpx;
        line-height: 88rpx;
        color: #fff;
        text-align: center;
        background: #00d1b6;
        border-radius: 44rpx;
      }

      .refuse {
        height: 88rpx;
        font-size: 30rpx;
        line-height: 88rpx;
        color: #86909c;
        text-align: center;
        background: #fff;
        border-radius: 44rpx;
      }
    }
  }
}
</style>
